<template>
	<view>
		<view class="sort">
			<uni-row>
				<view style="flex-flow: row nowrap; justify-content: space-between; align-items: center;">
				<uni-col :span="8">
					<view class="uni-flex">
						<uni-data-picker ref="sortPopup" :border='false' placeholder="全部分类" popup-title="请选择分类"
							:localdata="typeList" v-model="sortId" :map="props" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
						</uni-data-picker>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="uni-flex" style="height: 35px; line-height: 35px;" @click="reginPopup()"><text style="font-size: 12px; color: gray;line-height:16px">{{map == ''? '全部区域':map}}</text><uni-icons type="bottom" size="14"
							color="#B4B5B7"></uni-icons></view>
				</uni-col>
				<uni-col :span="8">
					<view class="uni-flex">
						<uni-data-picker ref="marketPopup" :border='false' placeholder="全部市场" :popup-title="marketList.length == 0?'暂无选项':'请选择'"
							:localdata="marketList" v-model="marketId" :map="props" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
						</uni-data-picker>
					</view>
				</uni-col>
				</view>
			</uni-row>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="item-left">
					<view class="title" v-if="item.produceName">
						<text class="name">{{item.produceName}}</text><text class="price"
							v-if="item.price">¥{{item.price}}</text><text>/公斤</text>
						<view class="info">
							<uni-icons type="location-filled" size="14" color="#646A74"></uni-icons>
							<text>{{item.marketName}}</text>
						</view>
					</view>
				</view>
				<view class="item-right" v-if="item.pushTime">{{item.pushTime.split(" ")[0]}}</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
			
		</view>
		<uni-popup ref="reginPopup" :safe-area='true'>
			<regionalComponents ref="region" @cancel="cancel" @sure="sure" />
		</uni-popup>

	</view>
</template>

<script>
	import {
		queryRegionTree,
		queryProduceCategoryTree,
		queryFarmMarketList,
		queryProducePriceList
	} from "@/api/user.js"
	export default {
		data() {
			return {
				province: [],
				regionId: "",
				city: [],
				mycity: "",
				districy: [],
				mydistricy: "",
				street: [],
				mystreet: "",
				regionaStatus: false,
				map: '',
				props: {
					text: 'name',
					value: 'id'
				},
				typeList: [],
				sortId: "",
				marketList: [],
				marketId: '',
				list: [],
				page: 0,
				maxpage: 0,
				showLoadMore: false,

			};
		},
		onLoad() {
			/* this.queryRegionTree({
				"parentId": "-1"
			}, 1) */
			setTimeout(() => {
				//this.$refs.region.getScreen();
				this.queryProduceCategoryTree({});
				this.queryFarmMarketList({
					regionId:''
				})
				this.queryProducePriceList({ //参数
					condition: {
						marketId: this.marketId,
						categoryId: this.sortId,
						regionId:this.regionId
					},
					pageNum: 1,
					pageSize: 20
				});
			}, 1000)
		},
		onPullDownRefresh() {
			setTimeout(() => {
				//this.$refs.region.getScreen();
				this.queryProduceCategoryTree({});
				this.queryFarmMarketList({
					regionId:''
				})
				this.queryProducePriceList({ //参数
					condition: {
						marketId: this.marketId,
						categoryId: this.sortId,
						regionId: this.regionId
					},
					pageNum: 1,
					pageSize: 20
				});
			}, 1000)
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page >= this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.queryProducePriceList({ //参数
				condition: {
					marketId: this.marketId,
					categoryId: this.sortId,
					regionId: this.regionId
				},
				pageNum: this.page,
				pageSize: 20
			});
		},
		methods: {
			async queryProduceCategoryTree(options) {
				const res = await queryProduceCategoryTree(options)
				let temp = JSON.stringify(res.returnObj);
				//console.log("listtemp",temp)
				temp = temp.replace(/subProduceCategoryList/g,"children")
				console.log("listtemp",temp)
				this.typeList = JSON.parse(temp)
				console.log("listtest",this.typeList)
			},
			async queryFarmMarketList(options) {
				const res = await queryFarmMarketList(options)
				this.marketList = res.returnObj;
				//console.log("listtest",this.marketList)
			},
			async queryProducePriceList(options) {
				const res = await queryProducePriceList(options)
				this.list = this.list.concat(res.returnObj.list);
				this.page = res.returnObj.pageNum;
				this.maxpage = res.returnObj.navigateLastPage
				this.showLoadMore = false;
			},
			reginPopup() {
				this.$refs.reginPopup.open('bottom');
				this.regionaStatus = true;
			},
			cancel() {
				this.$refs.reginPopup.close('bottom');
			},
			sure(data) {
				this.$refs.reginPopup.close('bottom');
				console.log(data);
				let map = '';
				data.forEach(item=>{
					console.log('data',item);
					if (item?.regionName != '请选择') {
						if (map!='') {
							map = map + '/' + item.regionName
						}else {
							map = item.regionName
						}
					}
				});
				this.map = map;
				let selectIndex = 0
				for (let i = 0; i < data.length; i++) {
					if (data[i].regionName == '请选择') {
						if (i == 0) {
							selectIndex = -1;
							break
						}else{
							selectIndex = i - 1;
							break;
						}

					} else {
						selectIndex = i
					}
				}
				if(selectIndex != -1){
					this.regionId = data[selectIndex].regionId
				}else{
					this.regionId = '';
				}
				let obj = {
					regionId: this.regionId
				}
				this.queryFarmMarketList(obj);
				this.list = [];
				this.page = 1;
				this.maxpage = 1;
				this.queryProducePriceList({ //参数
					condition: {
						marketId: this.marketId,
						categoryId: this.sortId,
						regionId:this.regionId
					},
					pageNum: 1,
					pageSize: 10
				});
			},
			sortVisible() {
				this.$refs.sortPopup.show()
			},
			change(e) {
				console.log("e:", e);
			},

			bindChange(e) {
				const val = e.detail.value
				console.log(e)
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
				this.list = [];
				this.page = 1;
				this.maxpage = 1;
				this.queryProducePriceList({ //参数
					condition: {
						marketId: this.marketId,
						categoryId: this.sortId,
						regionId: this.regionId
					},
					pageNum: 1,
					pageSize: 20
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sort {
		padding: 15px 0;
		background-color: #ffffff;
		margin-bottom: 10px;

		.uni-flex {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
		}
	}

	.list-item {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #F5F5F5;
		background-color: #ffffff;
	}

	.item-left {
		flex: 1;
	}

	.item-left .title {
		font-size: 24rpx;
		color: #283241;
	}

	.item-left .title .name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.item-left .title .price {
		margin-left: 30rpx;
		color: #FF5A5A;
		font-size: 40rpx;
		font-weight: 500;
	}

	.item-left .info {
		color: #646A74;
		font-size: 28rpx;
	}

	.item-right {
		color: #646A74;
	}
	/deep/.selected-list{
		font-size: 12px;
		flex-wrap: wrap;
		.text-color{
			color: gray;
		}
	}
	/deep/.input-value{
		flex-flow:row warp!important;
		overflow: visible;
		
		.selected-area{
			flex-flow: row warp;
			overflow: visible;
			
			.selected-area{
				flex-flow: row warp;
			}
		}
	}
	
</style>